import 'package:aidou/widgets/video/page.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  List<String> tabTextList = ['关注', '推荐'];
  List<Tab> tabWidgetList = [];
  TabController? tabController;
  // 推荐数据
  List<VideoModel> videoList1 = [];
  List<VideoModel> videoList2 = [];

  // 创建视频播放控制器
  VideoPlayerController? videoPlayerController;

  // 记录点赞
  Map<int, bool> favoriteMap = {};

  @override
  void initState() {
    super.initState();

    for (var item in tabTextList) {
      tabWidgetList.add(
        Tab(text: '$item'),
      );
    }

    tabController = new TabController(length: tabTextList.length, vsync: this);

    videoPlayerController = VideoPlayerController.network(
        'https://guangbei-video.obs.cn-east-3.myhuaweicloud.com:443/video%2F20211229%2Fe0ea7edbff4445abb966dcf5d21df9ef.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });

    for (int i = 0; i < 10; i++) {
      VideoModel videoModel = new VideoModel();
      videoModel.title = "推荐测试数据$i";
      videoModel.praise = i * 22;
      if (i % 3 == 0) {
        videoModel.isFollow = true;
        videoModel.isPraise = true;
      } else {
        videoModel.isPraise = false;
      }
      videoModel.cover = "";
      videoModel.pathUrl =
          'https://guangbei-video.obs.cn-east-3.myhuaweicloud.com:443/video%2F20211229%2Fe0ea7edbff4445abb966dcf5d21df9ef.mp4';
      videoList1.add(videoModel);
    }

    for (int i = 0; i < 3; i++) {
      VideoModel videoModel = new VideoModel();
      videoModel.title = "关注测试数据$i";
      videoModel.praise = i * 22;
      if (i % 3 == 0) {
        videoModel.isFollow = true;
        videoModel.isPraise = true;
      } else {
        videoModel.isPraise = false;
      }
      videoModel.cover = "";
      videoModel.pathUrl =
          'https://guangbei-video.obs.cn-east-3.myhuaweicloud.com:443/video%2F20211229%2Fe0ea7edbff4445abb966dcf5d21df9ef.mp4';
      videoList2.add(videoModel);
    }
  }

  @override
  Widget build(BuildContext context) {
    return buildRootBody();
  }

  Widget buildRootBody() {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            left: 0.0,
            right: 0.0,
            top: 0.0,
            bottom: 0.0,
            child: Container(
              color: Colors.black,
            ),
          ),
          Positioned(
              left: 0.0,
              right: 0.0,
              top: 0.0,
              bottom: 0.0,
              child: Container(
                color: Colors.white,
                child: buildTableViewWidget(),
              )),
          Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 0.0,
            top: 24.0,
            child: buildTabBarWidget(),
          ),
        ],
      ),
    );
  }

  // tabview
  buildTableViewWidget() {
    return new TabBarView(
      controller: tabController,
      children:
          tabTextList.map((value) => buildTableViewItemWidget(value)).toList(),
    );
  }

  // 上下滑动的页面
  Widget buildTableViewItemWidget(String value) {
    List<VideoModel> list = [];
    if (value == '推荐') {
      list = videoList1;
    } else {
      list = videoList2;
    }

    return PageView.builder(
      itemCount: list.length,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, i) {
        // return VideoPlayerPage(index: i);
        return Container(
          child: Text('我的'),
        );
      },
    );
    // return PageView.builder(
    //     itemCount: list.length,
    //     scrollDirection: Axis.vertical,
    //     itemBuilder: (BuildContext context, int index) {
    //       VideoModel videoModel = list[index];
    //       return buildPageViewItemWidget(value, videoModel);
    //     });
  }

  // buildPageViewItemWidget(String value, VideoModel videoModel) {
  //   return FindVideoItemPage(value, videoModel);
  // }

  // tabbar
  buildTabBarWidget() {
    return Container(
      // 对齐在顶部中间
      alignment: Alignment.topCenter,
      child: new TabBar(
        controller: tabController,
        tabs: tabWidgetList,
        // 指示器的颜色
        indicatorColor: Colors.white,
        // 指示器高度
        indicatorWeight: 2,
        // 指示器间距
        indicatorPadding: EdgeInsets.only(bottom: 2.0),
        isScrollable: true,
        // 指示器的宽度与文字对齐
        indicatorSize: TabBarIndicatorSize.label,
      ),
    );
  }
}

// 视频信息数据模型
class VideoModel {
  // 作品发布者头像
  String headPic = '';
  // 视频名称
  String title = '';
  // 视频链接
  String pathUrl = '';
  // 视频封面
  String cover = '';
  // 是否关注
  bool isFollow = false;
  // 是否点赞
  bool isPraise = false;
  // 点赞个数
  num praise = 0;
  // 评论数
  num comments = 0;
}

// // 播放视频的页面
// class FindVideoItemPage extends StatefulWidget {
//   String tabValue;
//   VideoModel videoModel;
//   FindVideoItemPage(this.tabValue, this.videoModel);

//   @override
//   State<StatefulWidget> createState() {
//     return FindVideoItemPageState();
//   }
// }

// class FindVideoItemPageState extends State<FindVideoItemPage> {
//   // 创建视频播放控制器
//   VideoPlayerController? videoPlayerController;
//   // 控制更新视频加载初始化完成状态更新
//   Future? videoPlayFuture;

//   @override
//   void initState() {
//     super.initState();

//     videoPlayerController =
//         VideoPlayerController.network(widget.videoModel.videoUrl)
//           ..initialize().then((_) {
//             // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
//             setState(() {});
//           });

//     videoPlayFuture = videoPlayerController.initialize().then((_) {
//       // 视频初始完后
//       // 调用播放
//       videoPlayerController?.play();
//       setState(() {});
//     });
//   }

//   Widget build(BuildContext context) {
//     return Stack(
//       children: <Widget>[
//         // 播放视频
//         buildVideoWidget(),

//         // // 控制视频播放按钮
//         // buildControllWidget(),

//         // // 底部区域的视频介绍
//         // buildBottomFlaggWidget(),

//         // // 右侧的用户信息按钮区域
//         // buildRightUserWidget(),
//       ],
//     );
//   }

//   @override
//   void dispose() {
//     super.dispose();
//     videoPlayerController?.dispose();
//   }

//   // 播放视频
//   buildVideoWidget() {
//     return FutureBuilder(
//       future: videoPlayFuture,
//       builder: (BuildContext context, value) {
//         if (value.connectionState == ConnectionState.done) {
//           // 点击事件
//           return InkWell(
//             onTap: () {
//               if (videoPlayerController.value.isInitialized) {
//                 // 视频已初始化
//                 if (videoPlayerController.value.isPlaying) {
//                   // 播放中 - 暂停
//                   videoPlayerController.pause();
//                 } else {
//                   // 暂停中 - 播放
//                   videoPlayerController.play();
//                 }
//               } else {
//                 // 未初始化
//                 videoPlayerController.initialize().then((_) {
//                   videoPlayerController.play();
//                   setState(() {});
//                 });
//               }
//             },
//             child: Center(
//               // AspectRatio 组件用来设定子组件宽高比
//               child: AspectRatio(
//                 // 设置视频的大小 宽高比。长宽表示为宽高比。例如，16：9宽高比的值为16.0/9.0
//                 aspectRatio: videoPlayerController.value.aspectRatio,
//                 // 播放视频的组件
//                 child: VideoPlayer(videoPlayerController),
//               ),
//             ),
//           );
//         } else {
//           return Container(
//             alignment: Alignment.center,
//             // 圆形加载进度
//             child: CircularProgressIndicator(),
//           );
//         }
//       },
//     );
//   }

//   // 控制视频播放按钮
//   buildControllWidget() {
//     return Container(
//       color: Colors.white,
//       child: Text('~消息页面建设中'),
//     );
//   }

//   // 底部区域的视频介绍
//   buildBottomFlaggWidget() {
//     return Container(
//       color: Colors.white,
//       child: Text('~消息页面建设中'),
//     );
//   }

//   // 右侧的用户信息按钮区域
//   buildRightUserWidget() {
//     return Container(
//       color: Colors.white,
//       child: Text('~消息页面建设中'),
//     );
//   }
// }
